'use client';
import Link from "next/link";
import {useSession} from "next-auth/react";
import {useRouter} from "next/navigation";

export default function Navbar() {
    // 获取身份验证会话
    const {status, data: session} = useSession()

    return (
        <div className={'border-b sticky h-16 items-center flex flex-row gap-12'}>
            <img
                className={'ml-4 size-12 rounded-full'}
                src="/logo.png" alt=""/>
            <Link href={'/'}>Home</Link>
            <div className={'h-16 items-center flex flex-row justify-between grow'}>
                <div className={'flex-1 gap-8 flex flex-row'}>
                    <Link href={'/ai/hr'}><span>简历分析</span></Link>
                    <Link href={'/ai/interview'}><span>模拟面试</span></Link>
                    <Link href={'/resume/add'}><span>上传简历</span></Link>
                    <Link href={'/resume/generate'}><span>生成简历</span></Link>
                </div>
                <div
                    className={'relative flex flex-row justify-between gap-4 items-center '}
                >
                    {status === 'loading' && <span>loading...</span>}
                    {status === 'unauthenticated' && <Link href={'/api/auth/signin'}>
                        <img
                            className={'opacity-30 size-12 bg-gray-200 rounded-full'}
                            src="/user.png" alt=""/>
                        <span className={'font-bold text-black absolute inset-y-3 inset-x-2'}>
                                登录
                            </span>
                    </Link>}
                    {status === 'authenticated' && <>
                        <img
                            className={'size-12 bg-gray-200 rounded-full'}
                            src="/logo.png" alt=""/>
                        <span className={'font-bold text-black absolute inset-y-3 inset-x-2'}>
                                {session.user!.name}
                            </span>
                        <Link href={'/api/auth/signout'}>退出</Link>
                    </>}
                </div>
            </div>
            <div className={'w-4'}></div>
        </div>
    )
}